<template>
  <div class="navList">
    <div class="navBody">
      <div class="logo">
        <img src="../../assets/images/fangcun.png" alt="" style="width:30px;height:30px;border-radius:4px"><span style="vertical-align:50%;color:#FFF;font-size:16px;font-weight:300;margin-left:10px">方寸后台系统</span>
        <!-- <span class="text" style="font-size:14px"></span> -->
      </div>
      <!-- <el-menu background-color="#001529" class="el-menu-vertical-demo" text-color="#fff" active-text-color="#fff" router  :default-active="activeMenu">
        <el-submenu v-for="(item,index) in navData" :key="index" :index="item.router" v-if="!item.hidden&&item.children">
          <template slot="title">
            <span class="text">{{item.name}}</span>
          </template>
          <el-menu-item v-for="(itemChildren,index) in item.children" :key="index" :index="itemChildren.router">
            <template slot="title">
                <span class="text">{{itemChildren.name}}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu> -->
      <div class="routerContainer">
        <!-- <router-link tag="div" class="routerOne " :class="$route.path.split('/')[1] === item.router? 'router-link-active':''" v-for="(item,index) in navData" :key="index" :to="{name:item.router}" v-if="!item.noShow ">
          <span class="text">{{item.name}}</span>
        </router-link> -->
        <router-link tag="div" class="routerOne" v-for="(item,index) in navData[activeIndex].children" :key="index" :to="{name:item.router}">
          <span class="text">
            <i>{{item.name}}</i>
          </span>
        </router-link>
      </div>
      <div class="bottomText">
        方寸后台管理系统1.0.19
      </div>
    </div>
    <!-- <div class="navOther" v-if="navData[activeIndex].children">
      <div class="bar">{{navData[activeIndex].name}}</div>
      <div class="routerContainer">
        <router-link tag="div" class="routerTwo" v-for="(item,index) in navData[activeIndex].children" :key="index" :to="{name:item.router}">
          <span class="text">
            <i>{{item.name}}</i>
          </span>
        </router-link>
      </div>
    </div> -->
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'navList',
  props: {
    navData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  created () {
  },
  computed: {
    activeIndex () {
      for (let item of this.navData) {
        if (this.$route.path.indexOf(item.router) !== -1) {
          console.log(item)
          return this.navData.indexOf(item)
        }
      }
    },
    activeMenu () {
      return this.$route.name
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/variable'
@import '../../assets/stylus/element'
.navList
  display flex
  width 100%
  height 100%
  .navBody
    flex 0 0 180px
    background #001529
    display flex
    flex-direction column
    .logo
      box-sizing border-box
      padding 12px 20px
      flex 0 0 53px
      background #002140
      img
        width 32px
        height 32px
        margin-top 2px
        // margin-left 20px
      .text
        margin 0 auto
        display inline-block
        width 140px
        height 40px
        text-align center
        line-height 40px
        font-weight 300
        color #fff
        // background $bg-normal
        background #002140
        font-size $font-size-normal
        // border-radius 4px
    .routerContainer
      flex 1
      // font-size 12px
      .routerOne
        box-sizing border-box
        // padding-left 16px
        height 40px
        width 100%
        display flex
        cursor pointer
        margin-bottom 8px
        &:hover
          background #001529
        &.router-link-active
          background #1890FF
        // .icon
        // flex none
        // line-height 40px
        // .iconfont
        // font-size $font-size-big
        // color $bg-normal
        // vertical-align middle
        .text
          flex 1
          // margin-left -10px
          line-height 40px
          text-align center
          font-size $font-size-normal
          color #FFFFFF
          i
            font-style normal
    .bottomText
      flex 0 0 48px
      line-height 48px
      text-align center
  .navOther
    flex 0 0 100px
    display flex
    flex-direction column
    background #000C17
    .bar
      flex 0 0 53px
      line-height 53px
      // height 53px
      text-align center
      padding 3.5px 1px
      font-size $font-size-normal
      box-sizing border-box
      font-weight bold
      background #001529
      color #FFFFFF
      // border-right 1px solid $color-border
      // border-bottom 1px solid $color-border
    .routerContainer
      width 100px
      .routerTwo
        box-sizing border-box
        padding-left 15px
        height 40px
        width 100%
        display flex
        cursor pointer
        margin-bottom 8px
        // margin-top 6px
        &.router-link-active
          background #409EFF
          color #A6DBFF
        .text
          flex 1
          margin-left 10px
          line-height 40px
          font-family PingFangSC-Regular
          font-size $font-size-normal
          color #AAAAAA
          i
            font-style normal
            // padding 8px 12px
            &:hover
              // background #F5F7FA
        &.router-link-active
          .text
            i
              // background #FFFFFF
              color #FFFFFF
</style>
<style>
